<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>响应式</title>
    <!-- <script src="./vue.global.js"></script> -->
    <!--引入vue2开发版本的vue核心包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<!--
v-bind 对style样式的控制

v-bind:style="{css属性名1:'CSS属性值',css属性名2：'css属性值2'}"
如果用横杠- 连接的，需要使用驼峰命名
-->
<style>
    #app #outer {
        width: 100px;
        height: 30px;
        background-color: gold;
    }

    #app #inner {
        height: 30px;
        background-color: blue;
    }
</style>

<body>
    <div id="app">
        <p v-bind:style="{fontSize:si}">测试 v-bind对于样式控制的增强操作style</p>
        <hr>
        <div id="outer">
            <div id="inner" v-bind:style="{width:persent + '%'}"></div>
        </div>
        {{persent+ '%'}}
        <button v-on:click="jin(20)">设置进度为20%</button>
        <button v-on:click="jin(40)">设置进度为40%</button>

    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                si: '10px',
                persent: 30
            },
            methods: {
                jin(p) {
                    this.persent = p
                }
            }
        })
    </script>

</body>

</html>